<template>
  <div class="songList">
    <a
      href="javascript:void(0)"
      v-for="(item, index) in songs"
      :key="item.id"
      class="item"
      @click="playMusic(index)"
    >
      <div
        class="num"
        v-if="showNum"
        :class="{ active: numLight && index < 3 }"
      >
        {{ numLight ? $options.filters.addZero(index + 1) : index + 1 }}
      </div>
      <div class="wrap">
        <div class="left">
          <h5 v-html="$options.filters.highLight(item.name, keywords)">
            <span class="alias" v-if="item.song.alias.length"
              >({{ item.song.alias[0] }})</span
            >
          </h5>
          <p>
            <i
              v-show="
                item.song.privilege && item.song.privilege.playMaxbr == 999000
              "
              class="sq"
            ></i
            ><span
              v-html="$options.filters.getArtists(item.song.artists, keywords)"
            ></span>
            -
            <span
              v-html="
                $options.filters.highLight(item.song.album.name, keywords)
              "
            ></span>
          </p>
        </div>
        <div class="right"><span class="playBtn"></span></div>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: "SongList",
  props: {
    songs: Array,
    showNum: {
      type: Boolean,
      default: false,
    },
    numLight: {
      type: Boolean,
      default: false,
    },
    keywords: {
      type: String,
      default: "",
    },
  },
  filters: {
    getArtists(val, keywords) {
      return this.highLight(val.map((item) => item.name).join(" / "), keywords);
    },
    addZero(val) {
      return val < 10 ? "0" + val : val;
    },
    highLight(val, keywords) {
      if (!keywords) return val;
      else
        return String(val).replace(
          new RegExp(keywords, "g"),
          '<span style="color:#5F9EA0;">' + keywords + "</span>"
        );
    },
  },
  methods: {
    playMusic(index) {
      // if (!item.picUrl || !item.al || !item.al.picUrl) {
      //   this.$http
      //     .get("/song/detail", {
      //       params: {
      //         ids: item.id,
      //       },
      //     })
      //     .then((d) => {
      //       // console.log(d);
      //       this.$emit("play", {
      //         musicID: item.id,
      //         picUrl: d.data.songs[0].al.picUrl,
      //         name: item.name,
      //       });
      //     })
      //     .catch(console.log);
      // } else {
      //   this.$emit("play", {
      //     musicID: item.id,
      //     picUrl: item.picUrl || (item.al && item.al.picUrl),
      //     name: item.name,
      //   });
      // }
      // console.log({
      //   idList: this.songs.map((item)=>item.id),
      //   curIndex: index
      // })
      this.$emit("play", {
        idList: this.songs.map((item) => item.id),
        curIndex: index,
        nameList: this.songs.map((item) => item.name),
        arList: this.songs.map((item) => item.song.artists),
      });
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  color: #333;
  padding-left: 10px;
  display: flex;
  .num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    font-size: 17px;
    margin-left: -10px;
    color: #bbb;
    &.active {
      color: #5dcaa8;
    }
  }
  .wrap {
    display: flex;
    flex: 1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .left {
      padding: 6px 0;
      width: 0;
      flex: 1;
      h5 {
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
        .alias {
          color: #888;
          margin-left: 4px;
        }
      }
      p {
        font-size: 12px;
        color: #888;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
        .sq {
          display: inline-block;
          width: 12px;
          height: 8px;
          margin-right: 4px;
          background: url(../assets/index_icon_2x.png) no-repeat;
          background-size: 166px 97px;
          filter: hue-rotate(140deg);
          opacity: 0.6;
        }
      }
    }
    .right {
      display: flex;
      padding: 0 10px;
      align-items: center;
      span {
        display: block;
        background: url(../assets/play.png) no-repeat;
        background-size: 100%;
        display: inline-block;
        width: 22px;
        height: 22px;
      }
    }
  }
}
</style>